<template>
    <div>
        <el-dialog v-dialogDrag :visible.sync="tableDivDialogVisible.v" width="65%" title="添加表格">
            <div class="content">
                <el-col :span="7">
                    <div>
                        <p>选择数据： </p>
                        <el-select
                                v-model="value" clearable placeholder="请选择添加数据">
                            <el-option
                                    v-for="item in myOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button @click="load" type="primary" plain style="height:40px;width:28.5%;margin-top: 40px;">
                        加载
                    </el-button>
                    <el-button @click="submit" type="success" plain style="height:40px;width:28.5%;margin-left: 20px">
                        确定
                    </el-button>
                </el-col>
                <el-col :span="17">
                    <div style="margin-top: 35px">
                        <data-table :tableInData="showTableData"></data-table>
                    </div>
                </el-col>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import dataTable from '../table/dataTable.vue'

    export default {
        name: "",
        data(){
            return{
                value:'',
                myOptions:[],
                showTableData:[],
                currentDiv: '',
                tableArray:[],
            }
        },
        components: {
            "data-table": dataTable
        },
        props: {
            tableDivDialogVisible: Object,
        },
        methods:{
            deleteRow(row){
                for(let i=0;i<this.tableArray.length;i++){
                    let nowId=this.tableArray[i].tableId.replace("tabmap","");
                    if(nowId==row){
                        this.tableArray.splice(i,1);
                        break;
                    }
                }
                console.log(this.tableArray);
            },
            clearTableArray(){
                this.tableArray=[];
            },
            showTable() {
                this.$method.getOptionData("addNew", this.showTableCallback);
            },
            showTableCallback(res) {
                this.myOptions = res;
            },
            changeDataFields(){

            },
            load(){
                let that=this;
                let dataLabel = '';
                for (let i = 0; i < this.myOptions.length; i++) {
                    if (this.value == this.myOptions[i].value) {
                        dataLabel = this.myOptions[i].label;
                    }
                }
                if(dataLabel.indexOf("_")!==-1){
                    let queryUrl = 'user/data/preview/'+ this.value + '?size=50000';
                    this.$axios.get(queryUrl).then(function (res) {
                        if (res.code == 200) {
                            // console.log(res);
                            that.showTableData = res.body;
                        } else {
                            that.$message(res.message);
                        }
                    })
                }
                else{
                    let queryUrl = '/data/preview/'+ this.value + '?size=50000';
                    this.$axios.get(queryUrl).then(function (res) {
                        if (res.code == 200) {
                            // console.log(res);
                            that.showTableData = res.body;
                        } else {
                            that.$message(res.message);
                        }
                    })
                }
            },
            submit(){
                this.currentDiv.showTableData = this.showTableData;
                this.tableDivDialogVisible.v=false;
                let tables={};
                tables.tableId=this.currentDiv.tableId;
                tables.value=this.value;
                tables.showTableData=this.showTableData;
                if(this.tableArray.length==0){
                    this.tableArray.push(tables);
                }
                else{
                    let count=0;
                    for(let i=0;i<this.tableArray.length;i++){
                        if(this.currentDiv.tableId==this.tableArray[i].tableId){
                            this.tableArray[i].value=this.value;
                            this.tableArray[i].showTableData=this.showTableData;
                            count=1;
                            break;
                        }
                        // else{
                        //     this.tableArray.push(tables);
                        //     break;
                        // }
                    }
                    if(count==0){
                        this.tableArray.push(tables);
                    }
                }
                console.log(this.tableArray);
            }
        },
        created(){
            let that = this;
            this.$Bus.$on('tableDivDialogVisible.v', (e) => {
                that.tableDivDialogVisible.v = e;
            });
            this.$Bus.$on('currentTableDiv', (currentTable) => {
                this.currentDiv = currentTable;
                let count=0;
                for(let i=0;i<this.tableArray.length;i++){
                    if(this.currentDiv.tableId==this.tableArray[i].tableId){
                        this.value=this.tableArray[i].value;
                        this.showTableData=this.tableArray[i].showTableData;
                        count=1;
                        break;
                    }
                    // else{
                    //     this.value='';
                    //     this.showTableData=[];
                    // }
                }
                if(count==0){
                    this.value='';
                    this.showTableData=[];
                }
            });
        },
        mounted(){
            this.showTable();
        },
        watch:{

        }
    }
</script>

<style>

</style>